<div>
    <h1 mat-dialog-title class="dialog-title" mat-dialog-draggable>{{'table.reports-title' | translate}}</h1>
    <mat-icon (click)="onNoClick()" class="dialog-close-btn">clear</mat-icon>
    <div mat-dialog-content class="container">
        <div class="block reports-column mt10">
            <div class="my-form-field report-column">
                <span>{{'table.report-columns' | translate}}</span>
                <mat-checkbox *ngFor="let item of reportsColumns" (change)="onReportColumChanged(item, $event.checked)"
                    [checked]="data.columns?.indexOf(item) !== -1">
                    {{'table.report-view-' + item | translate}}
                </mat-checkbox>
            </div>
        </div>
        <div class="block report-filter mt20">
            <span>{{'table.report-filter' | translate}}</span>
            <div class="block mt10">
                <div class="my-form-field inbk">
                    <span>{{'table.report-filter-name' | translate}}</span>
                    <input [(ngModel)]="reportsFilter.name" style="width: 300px" type="text">
                </div>
                <div class="my-form-field inbk ml10">
                    <span>{{'table.report-filter-count' | translate}}</span>
                    <input [(ngModel)]="reportsFilter.count" style="width: 100px" type="number">
                </div>
            </div>
        </div>
    </div>
    <div mat-dialog-actions class="dialog-action">
        <button mat-raised-button (click)="onNoClick()">{{'dlg.cancel' | translate}}</button>
        <button mat-raised-button color="primary" (click)="onOkClick()">{{'dlg.ok' | translate}}</button>
    </div>
</div>